<template>
    <div class="stock-container">
      <!-- 搜索区域 -->
    <div class="search-section">
      <!-- 出入库类型选择 -->
      <van-dropdown-menu active-color="#1768EF">
        <van-dropdown-item v-model="value1" :options="option1" @change="change1" />
      </van-dropdown-menu>

      <!-- 时间选择 -->
      <div class="date-section">
        <span class="date-label">出入库时间：</span>
        <van-field
          readonly
          clickable
          :value="startDate"
          placeholder="开始时间"
          @click="showStartDatePicker = true"
        />
        <span class="date-separator">~</span>
        <van-field
          readonly
          clickable
          :value="endDate"
          placeholder="结束时间"
          @click="showEndDatePicker = true"
        />
      </div>
    </div>

     <!-- 日期选择弹窗 -->
     <van-popup v-model="showStartDatePicker" position="bottom">
      <van-datetime-picker
        type="date"
        @confirm="onStartDateConfirm"
        @cancel="showStartDatePicker = false"
      />
    </van-popup>

    <van-popup v-model="showEndDatePicker" position="bottom">
      <van-datetime-picker
        type="date"
        @confirm="onEndDateConfirm"
        @cancel="showEndDatePicker = false"
      />
    </van-popup>


      <!-- 列表区域 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
           <!-- 物品列表 -->
        <div class="stock-list">
          <div v-for="(item, index) in list" :key="index" class="stock-item" @click="navigateToDetail(item.id)">
            <div class="stock-header">
              <div class="stock-name">{{ item.type == 1 ? '入库' : '出库' }}</div>
              <div class="stock-price" v-if="item.amount && item.type == 1">金额：￥{{ item.amount }}</div>
              <div class="stock-price" v-if="item.applyStatus == 6 && item.type == 2">已领取</div>
              <div class="stock-price" v-if="item.applyStatus == 4 && item.type == 2">待领取</div>
            </div>
            <div class="stock-info">
              <div>保管员：{{ item.applyUserDepartName }}</div>
            </div>
            <div class="stock-info">
                <div class="name" v-if="item.type == 2">领取人：{{ item.applyUserName }}</div>
                <div class="time" v-if="item.type == 2 && item.receviceTime">{{ item.receviceTime }}</div>
                <div v-if="item.applyStatus == 6 && item.type == 1">入库时间：{{ item.receviceTime }}</div>
              </div>
          </div>
        </div>
        </van-list>
      </van-pull-refresh>
  
      <!-- 类型选择弹窗 -->
      <van-popup v-model="showCategoryPicker" position="bottom">
        <van-picker
          :columns="categoryList"
          value-key="categoryName"
          @confirm="onCategoryConfirm"
          @cancel="showCategoryPicker = false"
          show-toolbar
        />
      </van-popup>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant'
  import { getInAndOutList } from '@/api/outputLog'
  
  export default {
    name: 'StockInquiry',
  
    data() {
      return {
        list: [],
        categoryList: [],
        categoryId: '',
        showCategoryPicker: false,
        searchTimer: null,
        pageNum: 1,
        pageSize: 10,
        loading: false,
        finished: false,
        refreshing: false,
        total: 0,
        value1: 0,
        option1: [
            { text: '全部', value: 0 },
            { text: '入库', value: 1 },
            { text: '出库', value: 2 }
        ],
        startDate: '',
        endDate: '',
        showStartDatePicker: false,
        showEndDatePicker: false
      }
    },
  
    created() {
      this.initData()
    },
  
    methods: {
      initData() {
        this.getInAndOutList()
      },
  
      getInAndOutList() {
        const params = {
          openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          receiveType: this.value1 || undefined, // 出入库类型
          applyBeginTime: this.startDate || undefined,
          applyEndTime: this.endDate || undefined,
          applyState : this.value1 == 1 ? 6 : '',
        }
  
        getInAndOutList(params)
          .then(res => {
            if (res.code === 200) {
                
              this.total = res.total
  
              if (this.refreshing) {
                this.list = []
                this.refreshing = false
              }
  
              this.list = this.list.concat(res.rows || [])
              this.loading = false
  
              if (this.list.length >= this.total) {
                this.finished = true
              } else {
                this.pageNum++
              }
            } else {
              Toast.fail(res.message || '获取库存列表失败')
            }
          })
          .catch(err => {
            console.error(err)
            Toast.fail('获取库存列表失败')
            this.loading = false
          })
      },

         // 类型切换
    change1(value) {
      this.value1 = value
      this.pageNum = 1
      this.finished = false
      this.list = []
      this.getInAndOutList()
    },

    // 开始时间选择
    onStartDateConfirm(value) {
      this.startDate = this.formatDate(value)
      this.showStartDatePicker = false
      this.pageNum = 1
      this.finished = false
      this.list = []
      this.getInAndOutList()
    },

    // 结束时间选择
    onEndDateConfirm(value) {
      this.endDate = this.formatDate(value)
      this.showEndDatePicker = false
      this.pageNum = 1
      this.finished = false
      this.list = []
      this.getInAndOutList()
    },

    // 日期格式化
    formatDate(date) {
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
  
      onRefresh() {
        this.pageNum = 1
        this.finished = false
        this.list = []
        this.getInAndOutList()
      },
  
      onLoad() {
        this.getInAndOutList()
      },
  
      onSearch() {
        if (this.searchTimer) {
          clearTimeout(this.searchTimer)
        }
        this.searchTimer = setTimeout(() => {
          this.pageNum = 1
          this.finished = false
          this.list = []
          this.getInAndOutList()
        }, 300)
      },
  
      onCategoryConfirm(value) {
        this.categoryName = value.categoryName
        this.categoryId = value.id
        this.showCategoryPicker = false
        this.pageNum = 1
        this.finished = false
        this.list = []
        this.getInAndOutList()
      },

       // 跳转方法
    navigateToDetail(id) {
        this.$router.push({
        path: '/outputDetail',
        query: {
          id: id
        }
      })
    }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .stock-container {


    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20px;
  
    .date-section {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .date-label {
      white-space: nowrap;
      margin-right: 10px;
    }

    .date-separator {
      margin: 0 10px;
    }
  }

    .search-section {
      margin-bottom: 20px;
    }
  
    .stock-item {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 15px;
  
      .stock-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
      }
  
      .stock-info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        color: #666;
      }
    }
  }
  </style>